<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/admin/css/common.css">
    <script src="/static/admin/js/jquery-3.0.0.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    {include file="common/top"}
    {include file="common/left"}
</div>
<div class="main-container">
    <!-- 面包屑 -->
    <!-- lay-separator="-" -->
    <span class="layui-breadcrumb" lay-separator="-">
            <a href="/admin/index/index">首页</a>
            <a href="/admin/photo/index">选择商品</a>
            <a href="/admin/photo/lst?id={$goodsid}">相册列表</a>
            <a href="###">添加相册</a>
        </span>
    <form class="layui-form" style="margin: 25px 0 0 0" method="post" action="add" enctype="multipart/form-data"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <input type="hidden" name="goods_id" value="{$goodsid}">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-form-item">
                <div class="layui-upload">
                    <label class="layui-form-label">请添加一张相册</label>
                    <button  type="button" class="layui-btn layui-icon layui-icon-upload" id="test1" style="vertical-align: top">上传图片</button>
                    <img class="layui-upload-img" style="width: 92px;height: 92px;margin: 0 10px 10px 0" id="demo1">
                    <p id="demoText"></p>
                    <input type="hidden" name="thumb" id="thumb">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>

</div>
</body>
<script src="/static/admin/layui/layui.js"></script>
<script>
    layui.use(['element','form'],() =>{
    });
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'uploads' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                console.log(res.code);
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else{
                    //上传成功
                    var x=res.url;
                    $('#thumb').val(x);
                    console.log(res);
                }
                
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


      
    });


    function addfile(_this){
      var div=$(_this).parent();
      // console.log(div.find('button').html());
      if(div.find('i').html()=='add'){
        var newdiv=div.clone();
        newdiv.find('i').html('cut');
        div.after(newdiv);
      }else{
        div.remove();
      }
    }
    
</script>
<!-- <script src="../layui/layui.all.js"></script>
<script>
    window.onload = () => {
        layui.layer.msg('Hello Layui!');
    }
</script> -->
</html>